<template>
  <div class="imgLoder-container">
      <img v-if="!originLoaded" :src="placeholder" class="placeholder" alt="">
      <img :src="src" alt="" :style="{opacity:originOpacity, transition:`${duration}ms`}" @load="handleLoad()">
  </div>
</template>

<script>
export default {
    props:{
        placeholder:{
            type:String,
            required:true,
        },
        src:{
            type:String,
            required:true,
        },
        duration:{
            type:Number,
            default:1000,
        }
    },
    data(){
        return{
            originLoaded:false,
        }
    },
    computed:{
        originOpacity(){
            return this.originLoaded ?1 :0
        }
    },
    methods:{
        handleLoad(){
            this.originLoaded=true;
            setTimeout(() => {
                this.$emit('load');
            }, this.duration);

    }

}
}
</script>

<style scoped>
.imgLoder-container{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.placeholder{
    filter: blur(1vw);
}
</style>